<template>
    <div class="container">
        <div class="avatar">
        <img src="https://cdn2.jianshu.io/assets/web/recommend-author-03cc8798d5cc3f986e49cbcb2eb63079.png" alt="">
        </div>
        <div class="author">
        <div class="authorItem" v-for="item in authorList" :key="item.name">
            <el-avatar :size='80' :src='item.url'></el-avatar>
        <div class="authorMsg">
            <span class="name">{{item.name}}</span>
            <span class="profile">{{item.profile}}</span>
            <el-button>+关注</el-button>
            <div class="hr">
            <hr>
            </div>

            <span><a>{{item.articleList[0]}}</a></span>
            <a><span>{{item.articleList[1]}}</span></a>
            <a><span>{{item.articleList[2]}}</span></a>
        </div> 
        </div>
        </div>
        <b-button variant="outline-danger" @click="getMore()" class="loadBtn">加载更多</b-button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            authorList:[
                {name:'梅拾璎',profile:'个人公众号：梅拾璎 个人简介：钱小雅和...',url:'https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180',
                articleList:['春至溪边','一个神童，不怕生活的土壤壤贫，就怕土...','生个学渣有什么好？这你得问学渣他妈']},
                {name:'董克平的日记',profile:'喜食好色的一枚无业游民',url:'https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180',
                articleList:['#开始记日记#1130 杜建青的家常小菜','#开始记日记#1129 临江宴的午餐，道道鲜...','#开始记日记#1128 一天吃了两次刀鱼馄饨']},
                {name:'简书钻首席小管家',profile:'愿意为你解答关于简书钻的一切疑问~买简书...',url:'https://upload.jianshu.io/users/upload_avatars/14715425/e0668349-8c75-43db-8a9d-c388e5f00d0d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180',
                articleList:['闰年二月粉丝团徽章出炉，快找金牌推广员...','2月解锁更多推广奖励：赢得专属徽章，获...','植树节徽章上线，共植美好明天']},
                {name:'无限猴子',profile:'一只有限写作的无限猴子~版权合作事宜请联',url:'https://upload.jianshu.io/users/upload_avatars/13213889/44b5d4d5-548c-43a6-bbd1-4387e526450e.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180',
                articleList:['圣诞快乐，船长先生！（27.1）','圣诞快乐，船长先生！（26.3)','圣诞快乐，船长先生！（26.2）']},
                //
                {name:'梅拾璎',profile:'个人公众号：梅拾璎 个人简介：钱小雅和...',url:'https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180',
                articleList:['春至溪边','一个神童，不怕生活的土壤壤贫，就怕土...','生个学渣有什么好？这你得问学渣他妈']},
                {name:'董克平的日记',profile:'喜食好色的一枚无业游民',url:'https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180',
                articleList:['#开始记日记#1130 杜建青的家常小菜','#开始记日记#1129 临江宴的午餐，道道鲜...','#开始记日记#1128 一天吃了两次刀鱼馄饨']},
                {name:'简书钻首席小管家',profile:'愿意为你解答关于简书钻的一切疑问~买简书...',url:'https://upload.jianshu.io/users/upload_avatars/14715425/e0668349-8c75-43db-8a9d-c388e5f00d0d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180',
                articleList:['闰年二月粉丝团徽章出炉，快找金牌推广员...','2月解锁更多推广奖励：赢得专属徽章，获...','植树节徽章上线，共植美好明天']},
                {name:'无限猴子',profile:'一只有限写作的无限猴子~版权合作事宜请联',url:'https://upload.jianshu.io/users/upload_avatars/13213889/44b5d4d5-548c-43a6-bbd1-4387e526450e.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180',
                articleList:['圣诞快乐，船长先生！（27.1）','圣诞快乐，船长先生！（26.3)','圣诞快乐，船长先生！（26.2）']},
                {name:'梅拾璎',profile:'个人公众号：梅拾璎 个人简介：钱小雅和...',url:'https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180',
                articleList:['春至溪边','一个神童，不怕生活的土壤壤贫，就怕土...','生个学渣有什么好？这你得问学渣他妈']},
            ]
        }
    }
    
}
</script>
<style scoped>
.container{
    width: 1000px;
}
.avatar{
    text-align: center;
}
.container img{
    margin-top: 30px;
    width: 960px;

}
.author{
  display: flex;
  flex-wrap: wrap;
  width:980px;
}
.authorItem{
    width: 300px;
    height: 300px;
    background-color: #f7f7f7;
    margin:80px 13px 0 12px;
    border: 1px solid #EAEAEA;
    padding: 0 20px;
}
.el-avatar{
    position: relative;
    left: 50%;
    transform: translate(-50%,-50%);
    padding:auto;
    
}
.authorMsg{
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-15%);
    
}
.authorMsg span{
    /* color: #999; */
    font-size: 13px;
    cursor: pointer;
}
.authorMsg .name{
    color: black;
    font-size: 21px;
    font-weight: bold;
    margin: 5px;
}
.profile{
    text-align: center;
    height: 50px;
    width: 180px;
    margin: 5px;
}
.authorMsg .el-button{
    color: #eee;
    background-color:#42C02E;
    border-radius: 18px;
    width: 100px;
    font-size: 16px;
    height: 40px;
}
.hr{
    width: 100%;
}
hr{
  line-height:0px;
}
hr:after{
  content:"最近更新";
  font-size:12px;
  color: #999;
  float: left;
}
.loadBtn{
    width: 100%;
    margin-top: 20px;
}
</style>